<template>
  <view class="container" :style="{ backgroundImage: `url(${counterStore.bg_img})` }">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="back-button" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="page-title">暗恋告白</text>
    </view>

    <!-- 牌阵说明 -->
    <view class="spread-description">
      <text class="description-text">暗恋告白牌阵专门用于探索暗恋关系和潜在的告白结果。这个牌阵可以帮助你了解暗恋对象的想法，以及告白的最佳时机和可能的结果。通过五张牌的排列，展现出完整的暗恋故事和潜在发展。</text>
    </view>

    <!-- 问题示例 -->
    <view class="example-section">
      <text class="example-title">提问示例：</text>
      <text class="example-text">Ta对我是否也有好感？</text>
      <text class="example-text">现在是告白的好时机吗？</text>
      <text class="example-text">如果我告白了，结果会如何？</text>
    </view>

    <!-- 提示文本 -->
    <view class="hint-text">
      <text>请集中注意力，想着你暗恋的对象，凭直觉抽取5张塔罗牌。</text>
    </view>

    <!-- 卡片选择区域 -->
    <view class="cards-container">
      <!-- 第一行 -->
      <view class="cards-row">
        <view class="card-position">
          <view class="card-wrapper">
            <image 
              src="/static/images/cards/card-back.png"
              class="card-image"
              mode="aspectFit"
            />
            <text class="card-label">Ta的想法</text>
          </view>
        </view>
      </view>

      <!-- 第二行 -->
      <view class="cards-row">
        <view class="card-position">
          <view class="card-wrapper">
            <image 
              src="/static/images/cards/card-back.png"
              class="card-image"
              mode="aspectFit"
            />
            <text class="card-label">当前阻碍</text>
          </view>
        </view>
        <view class="card-position">
          <view class="card-wrapper">
            <image 
              src="/static/images/cards/card-back.png"
              class="card-image"
              mode="aspectFit"
            />
            <text class="card-label">最佳时机</text>
          </view>
        </view>
      </view>

      <!-- 第三行 -->
      <view class="cards-row">
        <view class="card-position">
          <view class="card-wrapper">
            <image 
              src="/static/images/cards/card-back.png"
              class="card-image"
              mode="aspectFit"
            />
            <text class="card-label">告白结果</text>
          </view>
        </view>
        <view class="card-position">
          <view class="card-wrapper">
            <image 
              src="/static/images/cards/card-back.png"
              class="card-image"
              mode="aspectFit"
            />
            <text class="card-label">建议行动</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 开始抽牌按钮 -->
    <view class="start-button" @tap="startReading">
      开始抽牌
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {useCounterStore} from '@/store/counter'

const counterStore = useCounterStore()

// 返回首页
const goBack = () => {
  uni.switchTab({
    url: '/pages/index/index',
    fail: (err) => {
      console.error('返回首页失败:', err)
      uni.showToast({
        title: '返回失败',
        icon: 'none'
      })
    }
  })
}

// 开始抽牌
const startReading = () => {
  uni.navigateTo({
    url: '../card-select/card-select?count=5',
    fail: (err) => {
      console.error('跳转失败:', err)
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none'
      })
    }
  })
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  padding: 0 4vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.navbar {
  height: 12vw;
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 4vw;
}

.back-button {
  position: relative;
  width: 8vw;
  height: 8vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 50%;
}

.back-icon {
  color: #fff;
  font-size: 5vw;
}

.page-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 4vw;
  font-weight: bold;
}

.spread-description {
  padding: 4vw;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2vw;
  margin-bottom: 6vw;
}

.description-text {
  color: #fff;
  font-size: 3.2vw;
  line-height: 1.6;
  text-align: center;
}

.example-section {
  padding: 4vw;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2vw;
  margin-bottom: 4vw;
}

.example-title {
  color: #fff;
  font-size: 3.2vw;
  font-weight: bold;
  margin-bottom: 2vw;
  display: block;
}

.example-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 3vw;
  line-height: 1.6;
  display: block;
  margin-bottom: 2vw;
}

.example-text:last-child {
  margin-bottom: 0;
}

.hint-text {
  color: #fff;
  font-size: 3vw;
  line-height: 1.6;
  text-align: center;
  padding: 2vw;
  margin-bottom: 4vw;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2vw;
}

.cards-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6vw;
  padding: 4vw 0;
}

.cards-row {
  display: flex;
  justify-content: center;
  gap: 6vw;
}

.card-position {
  width: 25vw;
}

.card-wrapper {
  width: 100%;
  aspect-ratio: 1/1.5;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2vw;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-label {
  position: absolute;
  bottom: -6vw;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 3.2vw;
  padding: 1vw 3vw;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3vw;
  white-space: nowrap;
}

.start-button {
  width: 60vw;
  height: 12vw;
  background: linear-gradient(90deg, #27ba9b 0%, #1f9d82 100%);
  border-radius: 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.6vw;
  color: #fff;
  font-weight: bold;
  margin: 12vw auto 8vw;
  box-shadow: 0 2vw 4vw rgba(39, 186, 155, 0.2);
  position: relative;
  overflow: hidden;
}

.start-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: shine 2s infinite;
}

@keyframes shine {
  to {
    left: 100%;
  }
}

.start-button:active {
  transform: scale(0.98);
  box-shadow: 0 1vw 2vw rgba(39, 186, 155, 0.2);
}
</style> 